<template>
  <div class="wrapper">
    <div class="title">我的订单</div>
    <div class="orders">
      <div
        class="order"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="order__title">
          {{item.shopName}}
          <span class="order__status">
            {{item.isCanceled? '已取消':'已下单'}}
          </span>
        </div>
        <div class="order__content">
          <div class="order__content__imgs">
            <template
              v-for="(innerItem,innerIndex) in item.products"
              :key="innerIndex"
            >
              <img class="order__content__img" :src="innerItem.product.img" v-if="innerIndex<=3"/>
            </template>
          </div>
          <div class="order__content__info">
            <div class="order__content__price">&yen; {{item.totalPrice}}</div>
            <div class="order__content__count">共 {{item.totalNumber}} 件</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Docker :current-index="2"/>
</template>

<script>
import {reactive, toRefs} from 'vue';

import Docker from "../../components/Docker";
import {get} from "../../utils/request";

// 处理订单列表逻辑
const useOrderListEffect = () => {
  const data = reactive({list: []});

  const getNearbyList = async () => {
    const result = await get('/api/order');

    if(result?.errno === 0 && result?.data?.length){
      console.log('useOrderListEffect result.data:', result.data);
      const orderList = result.data;
      orderList.forEach((order) => {
        const products = order.products || [];
        let totalPrice = 0,
          totalNumber = 0;
        products.forEach((productItem) => {
          totalPrice += productItem.product.price * productItem.orderSales;
          totalNumber += productItem.orderSales;
        });
        order.totalPrice = totalPrice;
        order.totalNumber = totalNumber;
      });
      console.log('处理后的orderList:',orderList);
      data.list = orderList;
    }
  };

  getNearbyList();
  const {list} = toRefs(data);

  return {list};
};

export default {
name: "OrderList",
  components: {Docker},
  setup(){
    const {list} = useOrderListEffect()
    //console.log('OrderList list:',list);

    return {list}
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/variables';

.wrapper {
  position:absolute;
  left: 0;
  top:0;
  right: 0;
  bottom: .5rem;

  color: $content-fontColor;

  overflow-y: auto;

  background: rgb(248,248,248);
}

.title {
  line-height: .44rem;
  background: $bgColor;
  font-size: .16rem;
  color: $content-fontColor;
  text-align: center;
}

.orders {

}

.order {
  padding: .16rem;
  background: $bgColor;

  margin: .16rem .18rem;

  &__title {
    line-height: .22rem;
    font-size: .16rem;
    color: $content-fontColor;

    margin-bottom: .16rem;
  }

  &__status {
    float: right;
    font-size: .14rem;
    color: $light-fontColor;
  }

  &__content {
    display: flex;
    &__imgs {
      flex:1;
    }
    &__img {
      width: .4rem;
      height: .4rem;
      margin-right: .12rem;
    }
    &__info {
      width: .7rem;
    }
    &__price {
      font-size: .14rem;
      color: $highlight-fontColor;
      text-align: right;
      line-height: .2rem;
      margin-bottom: .04rem;
    }
    &__count {
      font-size: .12rem;
      color: $content-fontColor;
      text-align: right;
      line-height: .14rem;
    }
  }
}
</style>
